<!-- 市级 - 自建出租房屋隐患录入系统汇总表（居住） -->
<template>
  <div>
    <div class="header">
      <div class="title">
        <div>
          777村消隐村汇总：
          <a-radio-group name="radioGroup" v-model:value="checkValue" @change="handleCheck">
            <a-radio value="0">315前</a-radio>
            <a-radio value="1">315后</a-radio>
          </a-radio-group>
        </div>
        <div class="table-settings">
          <ImportSetting
            :tableData="tableData"
            :tableColumns="displayColumns"
            :wscolsList="wscolsList"
            ref="ImporBusinessDom"
            excelName="777村消隐村汇总"
            @click="importBusinessFn"
          />
        </div>
      </div>
    </div>
    <a-table
      :dataSource="tableData"
      :columns="displayColumns"
      :pagination="false"
      bordered
      :loading="loading"
    />
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, toRefs, onMounted, onBeforeMount, computed } from 'vue';
  // import { Tooltip } from 'ant-design-vue';
  import ImportSetting from '/@/views/village/housesDangerBusiness/ImportSetting.vue';
  import { getLivingList } from '/@/api/demo/system';
  import { iTableData, iTableColumns } from './types/table';
  import { iParams } from './types/params';

  import { useUserStore } from '/@/store/modules/user';
  // import { t } from '/@/hooks/web/useI18n';
  // 转义地区编码
  // import { selectClassFlyDict } from '/@/dict/bj_dict';
  let checkValue = ref<string>('1');
  let userInfo = ref<any>(null);
  let data = reactive<{
    tableData: iTableData[];
    tableColumns: iTableColumns[];
    wscolsList: { wch: number }[];
    id: number | any;
    loading: Boolean;
    keyWorld: String;
    cityToken: string | any;
  }>({
    // 表格数据
    tableData: [],
    tableColumns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
        width: 170,
      },
      {
        title: '区县 名称',
        dataIndex: 'name',
        key: 'name',
        align: 'center',
        width: 200,
      },
      {
        title: '街镇 名称',
        dataIndex: 'town',
        key: 'town',
        align: 'center',
        width: 200,
      },
      {
        title: '村庄 名称',
        dataIndex: 'village',
        key: 'village',
        align: 'center',
        width: 200,
      },
      {
        title: '已排查房屋',
        dataIndex: 'ypcfwcount',
        key: 'ypcfwcount',
        align: 'center',
        width: 170,
      },
      {
        title: '有隐患房屋',
        dataIndex: 'ypcfwcount_yh',
        key: 'ypcfwcount_yh',
        align: 'center',
        width: 170,
      },
      {
        title: '发现隐患数',
        dataIndex: 'fxyhcount',
        key: 'fxyhcount',
        align: 'center',
        width: 170,
      },
      {
        title: '消除隐患数',
        dataIndex: 'xcyhcount',
        key: 'xcyhcount',
        align: 'center',
        width: 170,
      },
      {
        title: '剩余隐患数',
        dataIndex: 'syyhcount',
        key: 'syyhcount',
        align: 'center',
        width: 170,
      },
      {
        title: '统计时间',
        dataIndex: 'createdate',
        key: 'createdate',
        align: 'center',
        width: 170,
      },
    ],
    id: null,
    loading: true,
    keyWorld: '',
    cityToken: '', // 判断是不是市区 110000 是北京市 展示搜索宽
    wscolsList: [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
  });
  // 表格的 ref Dom名称
  const ImporBusinessDom: any = ref(null);
  let { tableData, tableColumns, loading, wscolsList } = toRefs(data);
  function handleCheck(e: any) {
    // console.log(' e 是什么', e.target.value);
    if (e) {
      checkValue.value = e.target.value;
    }
    console.log('@checkValue.value', checkValue.value);
    getData();
  }
  async function getData() {
    // const { role } = userInfo.value;
    // console.log('@useUserStore==用户信息--role', role);
    // 北京市 的数据
    // xf_cs_yhd_jz777_after
    let id: string = checkValue.value === '0' ? '777xychz_before' : '777xychz_after';
    // let groupname = '';
    // if (role === 'City') {
    //   groupname = 'qxmc';
    // } else if (role === 'Area') {
    //   groupname = 'jzmc';
    // } else if (role === 'Street') {
    //   groupname = 'czmc';
    // }
    let params: iParams = {
      id: id,
      // groupname: groupname,
    };
    // console.log('@市级参数', params);
    // getBusinessList,
    // getLivingList,
    loading.value = true;
    let res: any = await getLivingList(params);
    // console.log('777村消隐村汇总', res);
    if (res || res.length > 0) {
      loading.value = false;
      res.forEach((item: any, index: number) => {
        // item.name = selectClassFlyDict(item.xzqdm);
        item.index = index + 1;
        // console.log('@bicycle', item.use_electric_bicycle);
      });
      // console.log('data', data);
      data.tableData = [...res];
    }
  }

  // // 计算总数的方法
  // function total(arr: any, item: any) {
  //   let total = arr.reduce((pre: any, cur: any) => {
  //     return pre + cur[item];
  //   }, 0);
  //   return total;
  // }
  function importBusinessFn() {
    if (ImporBusinessDom.value) {
      ImporBusinessDom.value.importFn();
    }
  }
  function getUserInfo() {
    const userStore = useUserStore();
    userInfo.value = userStore?.getUserInfo;
  }
  const displayColumns = computed(() => {
    // const { role } = userInfo.value;
    // let arr: any[] = [];
    // if (role === 'City') {
    //   // qx
    //   arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'czmc');
    //   return arr;
    // } else if (role === 'Area') {
    //   // jz
    //   arr = data.tableColumns.filter((item) => item.key !== 'czmc' && item.key !== 'qxmc');
    //   return arr;
    // } else if (role === 'Street') {
    //   // cun
    //   arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'qxmc');
    //   return arr;
    // } else {
    //   return data.tableColumns;
    // }
    return data.tableColumns;
  });
  onBeforeMount(() => {
    getUserInfo();
  });
  onMounted(() => {
    getData();
  });
</script>

<style lang="less">
  .header {
    width: 100%;
    // height: 250px;
    display: flex;
    // border: 1px solid red;
    line-height: 40px;
    justify-content: space-between;
    flex-direction: column;
    .title {
      display: flex;
      justify-content: space-between;
    }
    .search {
      // border: 1px solid green;
      height: 170px;
      .space {
        // border: 1px solid red;
        padding: 10px 20px;
        display: flex;
        // justify-content: space-between
        flex-wrap: wrap;
        .space-item {
          line-height: 32px;
          margin-bottom: 10px;
          .title {
            text-align: right;
            width: 150px;
            display: block;
          }
          // line-height: 20px;
        }
      }
    }
    .searchBtn {
      display: flex;
      // flex-direction: row-reverse;
      align-self: flex-end;
      padding: 0 15px;
      .resetBtn {
        margin-right: 10px;
      }
    }
    .table-settings {
      & > * {
        margin-right: 12px;
      }

      svg {
        width: 1.3em;
        height: 1.3em;
      }
    }
  }
</style>
